<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shop</title>
    <link rel="stylesheet" href="src/css/base.css">

    <style>
        .spinnerExample{margin:10px 0;}
        .boxta{
            width: 1210px;
            height: 680px;
            margin: 0 auto;

        }
        #box{
            width:360px;
            height:460px;
            /*border:1px solid #ccc;*/
            padding:10px;
            position:relative;
            float: left;

        }
        #box #middleImg{
            width:350px;
            height:350px;
            border:1px solid #ccc;
            padding:5px;
            position:relative;
            margin-bottom: 10px;
        }
        #box #middleImg img{
            width: 100%;
            height: 100%;

        }
        #box #middleArea{
            width:100px;
            height:100px;
            background:rgba(100, 222, 200, 0.5);
            position:absolute;
            left:0;
            top:0;
            display:none;
        }
        #box #small{
            /*background: red;*/
            width:360px;
            height:50px;
            margin-left: 15px;

        }
        #box #small li {
            width:60px;
            height:60px;
        }
        #box #small li img{
            width: 100%;
            height: 100%;
        }
        #box #small li{
            float:left;
            border:1px solid #ccc;
          margin-right: 3px;

            cursor:pointer;
        }
        #box #bigArea{
            position:absolute;
            left:420px;
            top:50px;
            overflow:hidden;
            width:400px;
            height:400px;
            border:1px solid #ccc;
            display:none;
            z-index: 1000;
        }
        #box #bigArea img{
            position:absolute;
            left:0;
            top:0;
            width:800px;
            height:800px;
        }
.right{
    padding-top: 5px;
    float: left;
    margin-left: 100px;
    font-size: 18px;
    line-height: 24px;
}
        .right .inner1{
            border-bottom: #ccc dotted 1px;
            width:600px;
            height: 75px;
            margin-bottom: 10px;
        }
        .right .inner1>p:nth-of-type(1) a{
            color: #ccc;
        }
        .right .inner1>p:nth-of-type(3) a{
            color: #ccc;
            font-size: 14px;
        }
        .inner2{
            border-bottom: #ccc dotted 1px;
            margin-bottom: 15px;
            line-height: 50px;
        }
        .inner2 s{
            color: #ccc;
            font-size: 14px;

        }
        .inner2 span{
            color: #c69c6d;
            font-size: 28px;
        }
        .inner2 b{
            display: inline-block;
            text-align: center;
            width: 80px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #fff;
            background: #c8a985;
            border-radius: 10px;
        }
        .inner2 i{
            padding-top: 5px;
            display:inline-block;
            width: 27px;
            height:26px;
            background:url("src/images/i.jpg") no-repeat;
            margin-left: 60px;
        }

        .inner2 .a{
            display: inline-block;
            height: 26px;
            width: 200px;
            position: relative;
        }
        .inner2 .a a{
position: absolute;
            top:0px;

            font-size: 14px;
            color: #696967;


        }
        .inner2 .a img{
            position: absolute;
            left: -32px;
            top:30px;
            display: none;
        }
        .inner2 .a:hover img{
            display: block;
        }
        .inner3{
            font-size: 12px;
            margin-bottom: 20px;
        }
        .inner3 p:nth-of-type(1){
          margin-bottom: 20px;
        }
        .inner3 i{

            margin-left: 50px;
            display: inline-block;
            width: 35px;
            height: 35px;
            padding: 3px;
            border: red solid 1px;

        }

        .inner3 p:nth-of-type(2){
            float: left;
        }
        .inner4 p:nth-of-type(2) span{
            margin-right: 10px;
        }
        .inner4 h4{
           height: 20px;


       }
        .inner3 b{
            display: inline-block;
            width: 20px;
            height: 20px;
            border:#999999 solid 1px;
            margin-left: 3px;
            font-max-size: 12px;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            background-color: #c69c6d;
            color: #fff;
        }
        .inner3 #num{
            display: inline-block;
            width: 20px;
            height: 15px;
            border:#999999 solid 1px;
            margin-left: 3px;
            font-max-size: 12px;
            text-align: center;
            line-height: 15px;
        }
        .inner4{
            font-size: 12px;
            color: #ccc;
            line-height: 28px;
        }
        .inner4 p:nth-last-of-type(1) {
            margin-bottom: 20px;
        }
        .inner4 p>a{
            color: #c69c6d;
        }
        .inner4 .btn1{
            float: left;
            width: 120px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            border: #c69c6d solid 1px;
            font-size: 14px;
            color: #c69c6d;
        }
        .inner4 .btn2{
            margin-left: 10px;
            float: left;
            width: 150px;
            height: 35px;
            background-color: #c69c6d;
            color: #fff;
            line-height: 35px;

            position: relative;

        }
        .inner4 .btn2 span{
            display: inline-block;
            width: 25px;
            height: 25px;
            background: url("src/images/lux_index.png")no-repeat -68px -50px;
            padding: 3px;
            position: absolute;
            left:25px;
            top:5px;
        }
        .inner4 .btn2 i{
            font-size: 14px;
            line-height: 35px;
            position: absolute;
            top: 0;
            left: 50px;
        }
        .inner4 .btn2,.inner4 .btn1{
            cursor: pointer;
        }
        .u-flyer{
            display: block;
            width: 70px;height: 70px;
            border-radius: 50px;
            /*position: fixed;*/
            z-index: 9999;}
        #msg{position:fixed; top:300px; right:35px;
            z-index:10000; width:1px; height:52px; line-height:52px; font-size:20px; text-align:center; color:#fff;
            background:#360; display:none}
    </style>

    <script src="src/js/lib/require.js" data-main="src/js/shop.js"></script>
    <script src="src/js/lib/jquery-3.3.1.js"></script>
    <script src="src/js/lib/jquery.fly.min.js"></script>



</head>
<body>
<div class="top">
    <p><a href="#"><img src="src/images/top.jpg" alt=""></a></p>
</div>
<div class="top-nav">
    <div class="top-inner">
        <div class="left">
            <span class="icon-home"></span><a href="#">第五大道首页</a>|
        </div>
        <div class="left2">
            <span class="icon-phone"></span><i>贵宾专线：4008-6767-38</i>
            <h4 id="h4">尊敬的:<u id="userinfor"></u>用户,你好!</h4>
            <a href="login.html" id="loginb">登录 <b>|</b></a>

        </div>
        <div class="register">
            <img src="src/images/youli.gif"/><a href="register.html">注册 <i>|</i></a>
        </div>
        <div class="nav">
            <div class="nav-content">
                <a href="#">我的第五大道</a>
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#"> 我的收藏</a></li>
                    <li><a href="#">已购商品</a></li>
                    <li><a href="#">我的礼券</a></li>
                    <li><a href="#">我的积分</a></li>
                </ul>
                <div class="nav-logo"></div>
            </div>
        </div>
        <div class="help">
            <a href="#">帮助中心</a>
        </div>
        <div class="xz">
            <a href="#">手机版下载 <span class="icon-arrow-outline-down"></span></a>
            <!--<img src="images/qr.jpg" alt="">-->
        </div>

    </div>


</div>
<div class="header">
    <div class="logo">
        <a href="#"><img src="src/images/logo.jpg"></a>
    </div>
    <div class="yijian">
        <a href="#"><img src="src/images/yijian.jpg"></a>
    </div>
    <div class="search">
        <input placeholder="太阳镜" type="text">
        <button>搜索</button>
        <a href="#">连衣裙</a>
        <a href="#">美妆</a>
        <a href="#">运动户外</a>
        <a href="#">箱包</a>
        <a href="#">配饰</a>
        <a href="#">腕表</a>
    </div>
    <div class="haiwai">
        <i> <span class="icon-globe"></span>
            <h2>第五大道海外生活</h2></i>
        <img src="src/images/cart.png" alt="">
    </div>

</div>
<div class="nav-menu">
    <div class="menu">
        <ul>
            <li class="current"><a href="#">商品分类</a></li>
            <li><a href="#">品牌</a></li>
            <li><a href="#">最新</a></li>
            <li><a href="#">女士</a></li>
            <li><a href="#">男士</a></li>
            <li><a href="#">生活馆</a></li>
            <li><a href="#">海外馆</a></li>
            <li><a href="#">时尚</a></li>
            <li><a href="#">特惠</a></li>
            <li><a href="#">礼品区</a></li>
            <li><a href="#"><span class="icon-location"></span>到店</a></li>
            <li><a href="#"><img src="src/images/overseaslogo.gif" alt=""></a></li>
            <li><a href="#"><img src="src/images/ri.jpg" alt=""></a></li>
        </ul>
    </div>
</div>
<div class="boxta">
    <div id="box">
        <div id="middleImg">
            <img src="src/images/ams.jpg"/>
            <div id="middleArea"></div>
        </div>
        <div id="small">
            <ul>
                <li><img src="src/images/ams1.jpg" alt=""></li>
                <li><img src="src/images/ams2.jpg" alt=""></li>
                <li><img src="src/images/ams3.jpg" alt=""></li>
                <li><img src="src/images/ams4.jpg" alt=""></li>
                <li><img src="src/images/ams5.jpg" alt=""></li>
            </ul>
        </div>
        <div id="bigArea">
            <img id="bigImg" src="src/images/ams.jpg"/>
        </div>
    </div>
    <div class="right">
        <div class="inner1">
            <p>
                <a>Hermes爱马仕</a>
            </p>
            <p><a>经典红色H羊毛毯</a></p>
            <p><a>货号: 5Lux1695812g_p5811751</a></p>
        </div>
        <div class="inner2">
            <span>￥ 8500</span> <s>￥ 11050</s> <b>红卡会员价</b><i></i>
            <div class="a">

            <a>扫码下载手机客户端 </a>
                <img src="src/images/qr.jpg" alt="">
        </div>
        </div>
        <div class="inner3">
            <p><span>颜色</span><i>红色</i></p>
            <p><span>数量</span><h4> <b class="numjbtn">-</b><input type="text" id="num" value="1"><b class="numjabtn">+</b></h4></p>
        </div>
        <div class="inner4">
            <p>发货门店此货品将由 <a>第五大道奢侈品网</a> 为您发货。</p>
            <p>发货时效预计15-25个工作日发货，延迟发货慢必赔！查看详情 》</p>
            <p>温馨提示本商品　 有质量问题支持7天退换货</p>
            <p>包邮政策白金钻石顺丰包邮，注册用户满99元免邮</p>
            <p>发票政策海外商品暂不支持发票</p>
            <div class="btn1">立即购买</div>
            <div id="xxx" class="btn2"><span></span><i>加入购物袋</i></div>
        </div>
    </div>
</div>
<div class="sidebar">
    <ul>
        <li class="current">
            <i id="end"></i><a href="#"></a></li>
        <li><a href="#"></a>
            <div class="side">
                <img src="src/images/weixin_img.png" alt="">
            </div>
        </li>
        <li><a href="#"></a>
            <div class="side">意见反馈</div>
        </li>
        <li><a href="#"></a>
            <div class="side">联系我们</div>
        </li>
        <li><a id="back-top"></a>
            <div class="side"> <!--onclick="animate({scrollTop: 0},'slow')"-->回到顶部</div>
        </li>
    </ul>
</div>
<div id="msg">加入购物车</div>
<div class="footer">

</div>
</body>
</html>
